<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酒店后台管理系统</title>
<link href="/resources/hotel/css/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        input{
            border: #00a4ac 0.3px solid;
            height: 30px;
        }
        a{
            cursor:pointer;
        }
        .paginList li{
            margin-left: 50px;
        }
    </style>
<script type="text/javascript" src="/resources/hotel/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".click").click(function(){
  $(".tip").fadeIn(200);
  });
  
  $(".tiptop a").click(function(){
  $(".tip").fadeOut(200);
});

  $(".sure").click(function(){
  $(".tip").fadeOut(100);
});

  $(".cancel").click(function(){
  $(".tip").fadeOut(100);
});

});
</script>


</head>


<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">酒店信息管理</a></li>
        <li><a href="#">首页</a></li>

    </ul>
</div>

<div class="rightinfo">

    <div>
        <div style="font-size:30px;margin:auto;width: 250px;">途安商务连锁酒店</div>
    </div>

    <table class="tablelist">
        <thead>
            <tr>
                <th>房间编号</th>
                <th>房间名称</th>
                <th>房间类型</th>
                <th>房间描述</th>
                <th>库存</th>
                <th>原价</th>
                <th>现价</th>
            </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>


    <div class="pagin">
        <div class="message">共 <i class="blue" id="countData">0</i> 条记录，共 <i class="blue" id="countPage">0</i> 页，当前显示第&nbsp;<i
                class="blue" id="nowPage">0&nbsp;</i>页
        </div>
        <ul class="paginList" style="margin-right: 50px;">
            <li class="paginItem"><span><a href="#" style="width: 70px;" id="upPage" onclick="ds(-1)">上一页</a></span>
            </li>
            <li class="paginItem">
                <input id="finPageBox" type="text" style="width: 60px;height: 25px; "
                       onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/"/>
                <button style="padding: 5px 10px;font-size: 12px;" id="findPageButton" onclick="ds(0)">跳转</button>
            </li>
            <li class="paginItem"><span><a href="#" style="width: 70px;border: solid 1px lavender;" id="nextPage"
                                           onclick="ds(1)" href="findPageButton">下一页</a></span></li>
        </ul>
    </div>


    <div class="tip">
        <div class="tiptop"><span>提示信息</span><a></a></div>

        <div class="tipinfo">
            <span><img src="/resources/hotel/images/ticon.png"/></span>
            <div class="tipright">
                <p>是否确认对信息的修改 ？</p>
                <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
            </div>
        </div>
        <div class="tipbtn">
            <input name="" type="button" class="sure" value="确定"/>&nbsp;
            <input name="" type="button" class="cancel" value="取消"/>
        </div>
    </div>
</div>


    <!--首页-->
    <script type="text/javascript">
        $('.tablelist tbody tr:odd').addClass('odd');
    </script>
<script type="text/javascript">
    var nowPage;//当前页数
    var countPage;//总页数
    getPage(1);//页面加载，获取第一页

    /*翻页*/
    function ds(ds) {
        switch (ds) {
            case -1:
                if (nowPage - 1 > 0) {
                    nowPage = nowPage - 1;
                    getPage(nowPage);//通过页数查询信息
                } else {
                    alert("翻不动了");
                }
                break;
            case 0:
                var findPageNum = $("#finPageBox").val();
                if (findPageNum > 0 && findPageNum <= countPage) {
                    getPage(findPageNum);
                    $("#finPageBox").val("");
                } else {
                    alert("错了");
                }
                break;
            case 1:
                if (nowPage* 1 + 1  <= countPage) {
                    nowPage = nowPage* 1 + 1;
                    getPage(nowPage);
                } else {
                    alert("最后一页了");
                }
                break;
            default:
                alert("请求错误");
        }
    }

    function getPage(pageIndex) {
        $.ajax({
            type: "get",
            url: "http://localhost:8080/roomController/selectRoomsByHotelIdAndRoonTypeId",
            dataType: "json",
            data: {
                "status": -1,
                "currentPage": pageIndex
            },
            success: function (data) {
                nowPage = pageIndex;
                $("#nowPage").html(nowPage);
                $("#countData").html(data.pageBean.totalCount);//设置数据的条数
                $("#countPage").html(data.pageBean.totalPage);//设置总页数
                countPage = data.pageBean.totalPage;

                if (data.pageBean.totalCount > 0) {
                    var tbody = $("#tbody");
                    tbody.html("");//清除之前的数据
                    var tr = "";
                    for (var i = 0; i < data.pageBean.list.length; i++) {
                        tr = "<tr>" +
                            "<td>" + data.pageBean.list[i].rId + "</td>" +
                            "<td>" + data.pageBean.list[i].rName + "</td>" +
                            "<td>" + data.pageBean.list[i].rType.rtName + "</td>" +
                            "<td>" + data.pageBean.list[i].rDesc + "</td>" +
                            "<td>" + data.pageBean.list[i].rRepertory + "</td>" +
                            "<td>" + data.pageBean.list[i].rOriginalPrice + "</td>" +
                            "<td>" + data.pageBean.list[i].rPresentPrice + "</td>" +
                            "</tr>";
                        tbody.append(tr);
                    }
                } else {
                    alert("无信息!");
                }
            },
            error: function () {
                alert("访问错误！!");
            }

        });
    }
</script>
</body>
</html>
